<template>
<view class="content">
	<view class="warp-content  bg-white">
		<view class="flex" style="padding-left: 48rpx;height: 110rpx;">
			<view class="" style="width: 500rpx;">
					<u-search style="height: 118rpx;padding-top: 0rpx;padding-bottom: 0rpx;" placeholder="请输入兑换码或邀请码" shape="square" search-icon=" " v-model="keyword"></u-search>
			</view>
			
				<view class="btn-content flex-content">
					兑换
				</view>
		</view>
		<view class="flex-content">
			<view class="text-content" style="height: 72rpx;margin-top: 20rpx;" :class="selectId==item.id?'sel-text':''"  @click="selectFn(item)"  v-for="(item,index) in searchlist" :key="index">
				{{item.text}}
			</view>
		</view>
	</view>
	<scroll-view style="height:calc(100vh - 200rpx);"  :scroll-y="true" @scrolltolower="scrolltolowerfn">
		
		<view class="">
			<view class="no-coupon bg-white flex-content xxl bold" v-if="couponid!='a'&&selectId==0" @click="noselect">
				不使用优惠卷
			</view>
			<block v-for="(item,index) in shoplist" :key="index">
			<discounts-list :item="item" @setCoupon="setCoupon" :index="index" type="2" :cartype="cartype" :couponid="couponid" :money="money"></discounts-list>
			</block>
			<view class="flex-content" style="width: 100%;" v-if="shoplist.length==0">
				 <view class="">
					 <view class="flex-content"  style="width: 100%;margin-top: 148rpx;">
					 	<image style="width: 204rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/3496f98a-65f4-42c6-82a2-63c0443467b5.png" mode="widthFix"></image>
					 </view>
				 	 <view class="flex-content m-t-26"  style="width: 100%;">
				 	 	{{selectId==0?'没有可用优惠券':'暂无使用优惠卷'}}
				 	 </view>
				 </view>
			</view>
		</view>
		</scroll-view>
</view>
</template>

<script>
import {myCouponList} from "@/api/user"
	export default {
		
		data() {
			return {
			      keyword:"",
				  selectId:0,
				  shoplist:[],
				  pagecount:0,
				   cartype:9,
				  			   couponid:"a",
                  searchlist:[
					  {
						  id:0,
						  text:"待使用"
					  },
					  {
					  						  id:1,
					  						  text:"已使用"
					  },
					  {
					  						  id:2,
					  						  text:"已失效"
					  }
				  ],
				  scroll:{
				  				limit:10,
				  				page:1,
								status:0,
							
				  			},
								money:""
			};
		},
		onLoad(option) {
			this.getdata()
		
			if(option){
				this.money=option.money
							this.cartype=option.cartype
							this.couponid=option.couponid
							 console.log("优惠卷id"+this.couponid);
							 this.cartype= Number(this.cartype)  +1
						}
						
		},
		methods: {
			noselect(){
				if(this.cartype==2){
						uni.setStorageSync("onecopon",'a')
				}else if(this.cartype==3){
					uni.setStorageSync("twocopon",'b')
				}
				uni.navigateBack({
					
				})
			},
               selectFn(item){
				   this.scroll.status=item.id
				   this.selectId=item.id
				   this.scroll.page=1
				   this.shoplist=[]
				   this.getdata()
			   },
			   	async scrolltolowerfn(){
			   				
			   				this.scroll.page=this.scroll.page+1
			   				if(this.scroll.page<=this.pagecount){
			   					await this.getdata()
			   				}
			   				
			   			},
			   			async getdata(){
			   			let res=await myCouponList(this.scroll)
			   				this.pagecount=Math.ceil(res.count/10)
			   				this.shoplist=[...this.shoplist,...res.data.lists]
			   				return res.data
			   		
			   			},
		}
		
	};
</script>
<style lang="scss" scoped>
	.no-coupon{
		width: 100%;
		height: 200rpx;
		border-radius: 10rpx;
		
	}
	.sel-text{
		color: #000000;
		border-bottom: 6rpx solid #e85631;
	}
	.text-content:nth-child(2){
		margin-left: 170rpx;
		margin-right: 170rpx;
	}
	.text-content{
		color: #979797;
	}
.content{
	
}
.btn-content{
	width: 150rpx;
	border-radius: 10rpx;
	height: 88rpx;
	color: #FFFFFF;
	background-color: #e85631;
}
.warp-content{
	width: 100%;
	height: 200rpx;
}
</style>
